<template>
  <div class="bigBox" v-if="picUrl">
    <div
      class="move"
      @click="$emit('toggle-show-lyric')"
      :class="{ paused: paused }"
    >
      <img :src="picUrl" class="bigImg" />
      <div class="balck"></div>
      <div class="white" :class="{ paused: paused }"></div>
    </div>
    <div class="all">
      <div class="myLove" v-show="!isShowMylove" @click="isShowMylove = true">
        <img src="../assets/xih.svg" alt="" class="myLoveImg" />
      </div>
      <div class="NomyLove" v-show="isShowMylove" @click="isShowMylove = false">
        <img src="../assets/buxih.svg" alt="" class="NomyLoveImg" />
      </div>
      <div class="xiaZai">
        <img src="../assets/xiazai.svg" class="xiaZaiImg" />
      </div>
      <div class="pinLun" @click="isShowRemark = !isShowRemark">
        <img src="../assets/pinglun.svg" class="pinLunImg" />
      </div>
      <div class="more"><img src="../assets/movee.svg" class="moreImg" /></div>
    </div>
    <remarkChart
      :isShowRemark="isShowRemark"
      @stop-remark="isShowRemark = false"
      :picUrl="picUrl"
      :currentMusic="currentMusic"
      :id="id"
    ></remarkChart>
  </div>
</template>

<script>
import remarkChart from "@/components/remarkChart.vue";
export default {
  props: ["currentMusic", "paused", "picUrl"],
  data() {
    return {
      isShowMylove: true,
      isShowRemark: false,
      id:this.$route.query.id,
    };
  },
  components: {
    remarkChart,
  },
};
</script>

<style scoped lang="less">
.bigBox {
  .move {
    &.paused {
      .bigImg {
        animation-play-state: paused;
      }
    }
  }
}
.bigBox {
  position: relative;
  left: 0;
  top: 0;
  .move {
    position: absolute;
    width: 248px;
    height: 248px;
    left: 60px;
    top: 130px;
    z-index: 8;
    .bigImg {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      position: absolute;
      left: 50px;
      top: 50px;
      animation: played 10s linear infinite;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
    }
    .balck {
      width: 248px;
      height: 248px;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 2;
      background: url("../assets/disc.png") no-repeat;
      background-size: contain;
      animation: played 10s linear infinite;
    }
    &.paused {
      .balck {
        animation-play-state: paused;
      }
    }
    .white {
      position: absolute;
      width: 248px;
      height: 248px;
      left: 0px;
      top: 0px;
      z-index: 8;
      background: url("../assets/disc_light.png") no-repeat;
      background-size: contain;
      animation: played 10s linear infinite;
    }
    &.paused {
      .white {
        animation-play-state: paused;
      }
    }
  }
  .all {
    width: 100vw;
    height: 30px;
    position: absolute;
    top: 540px;
    left: 10vw;
    z-index: 2;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    .myLove {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 2px;
      left: 5vw;
      .myLoveImg {
        width: 25px;
        height: 25px;
      }
    }
    .NomyLove {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 2px;
      left: 5vw;
      .NomyLoveImg {
        width: 25px;
        height: 25px;
      }
    }
    .xiaZai {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 2px;
      left: 25vw;
      .xiaZaiImg {
        width: 25px;
        height: 25px;
      }
    }
    .pinLun {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 2px;
      left: 45vw;
      .pinLunImg {
        width: 25px;
        height: 25px;
      }
    }
    .more {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 2px;
      left: 65vw;
      .moreImg {
        width: 25px;
        height: 25px;
      }
    }
  }
}
@keyframes played {
  form {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>